import { Component } from "vue"
import styles from "./index.module.less";
export type stationItem = {
  props: {
    label: string,
    value: string,
  }
}
export type jqItem = {
  props: {
    label: string,
    level: string,
    value: string,
  }
}
export type peopleItem = {
  props: {
    labelTop: string,
    valueTop: string,
    labelBottom: string,
    valueBottom: string,
  }
}
export type linkageItem = {
  props: {
    label: string,
    valueTop: string,
    valueBottom: string,
  }
}
export type carItem = {
  props: {
    label: string,
    value: string,
  }
}
export function vNodeTransformDom(component: Component) {
  // 不需要主动清空变量，GC回收
  const mountDom = document.createElement('div')
  const app = createApp(component)
  const realDom = app.mount(mountDom)
  return realDom.$el.outerHTML
}
/** 出警队站 */
export function fightStationLabel(item?: stationItem) {
  let { props } = item ? item : { props: { label: '队站', value: '1车6人' } }
  const component = defineComponent({
    setup() { },
    render() {
      let dom =
        <div class={styles.fightStationLabel}>
          <div class={styles.fightStationLabelLeft}>{props.label}</div>
          <div class={styles.fightStationLabelLeft}>{props.value}</div>
        </div>
      return dom
    },
  })

  return {
    'components': component,
    'outHTML': vNodeTransformDom(component)
  }
}

/** 其他队站 */
export function normalStationLabel(item?: stationItem) {
  let { props } = item ? item : { props: { label: '队站', value: '出警' } }
  const component = defineComponent({
    setup() { },
    render() {
      let dom =
        <div class={styles.normalStationLabel}>
          <div class={props.label ? styles.normalStationLabelLeft : ''} >{props.label}</div>
          <div class={props.value ? styles.normalStationLabelRight : ''} >{props.value}</div>
        </div>
      return dom
    },
  })

  return {
    'components': component,
    'outHTML': vNodeTransformDom(component)
  }
}

/** 警情点标牌 */
export function jqPointLabel(item?: jqItem) {
  let { props } = item ? item : { props: { label: '队站', level: '一级火灾', value: '南京市浦口区某某路\n某某号溪流村88号' } }
  const component = defineComponent({
    setup() { },
    render() {
      let dom =
        <div class={styles.jqPointLabel}>
          <div class='px-4 h-full flex flex-col justify-center items-center border-r-2 border-[#F34D51]'>
            <div class='text-[20px] leading-6 mb-1'>{props.label || ''}</div>
            <div>{props.level || ''}</div>
          </div>
          <div class={styles.jqPointLabelRight}>
            <div class=" tracking-widest " >{props.value?.slice(0, 12) || ''}</div>
            <div
              class='truncate'
              style={{ display: (props.value?.slice(12) == '' ? 'none' : '') }}
            >{props.value?.slice(12) || ''}</div>
          </div>
        </div>
      return dom
    },
  })

  return {
    'components': component,
    'outHTML': vNodeTransformDom(component)
  }
}


/** 小车 */
export function carLabel(item?: carItem) {
  let { props } = item ? item : { props: { label: '东山站', value: '10' } }
  const component = defineComponent({
    setup() { },
    render() {
      let dom =
        <div class={styles.carLabel}>
          <div class={styles.carLabelLeft}>{props.label}</div>
          <div class={styles.carLabelRight}>
            剩余 <span class='text-red-500'>{props.value}</span> 分钟
          </div>
        </div>
      return dom
    },
  })

  return {
    'components': component,
    'outHTML': vNodeTransformDom(component)
  }
}

/** 微型消防站 */
export function miniStationLabel(item?: stationItem) {
  let { props } = item ? item : { props: { label: '', value: '出警' } }
  const component = defineComponent({
    setup() { },
    render() {
      let dom =
        <div class={styles.miniStationLabel}>
          <div class={props.label ? styles.miniStationLabelLeft : ''} >{props.label}</div>
          <div class={props.value ? styles.miniStationLabelRight : ''} >{props.value}</div>
        </div>
      return dom
    },
  })

  return {
    'components': component,
    'outHTML': vNodeTransformDom(component)
  }
}


/** 人员 */
export function peopleLabel(item?: peopleItem) {
  let { props } = item ? item : { props: { labelTop: '北京西路站', valueTop: '副政治辅导员', labelBottom: '欧阳娜娜', valueBottom: '13908744589' } }
  const component = defineComponent({
    setup() { },
    render() {
      let dom =
        <div class={styles.peopleLabel}>
          <div class={styles.peopleLabelTop} >
            <div class={props.labelTop ? styles.peopleLabelLeft : ''} >{props.labelTop}</div>
            <div class={props.valueTop ? styles.peopleLabelRight : ''} >{props.valueTop}</div>
          </div>

          <div class={styles.peopleLabelBottom}>
            <div class={props.labelBottom ? styles.peopleLabelLeft : ''} >{props.labelBottom}</div>
            <div class={props.valueBottom ? styles.peopleLabelRight : ''} >{props.valueBottom}</div>
          </div>

        </div>
      return dom
    },
  })

  return {
    'components': component,
    'outHTML': vNodeTransformDom(component)
  }
}

/** 联动力量 */
export function linkageLabel(item?: linkageItem) {
  let { props } = item ? item : { props: { label: '街', valueTop: '梅园新村街道', valueBottom: '13908744589' } }
  const component = defineComponent({
    setup() { },
    render() {
      let dom =
        <div class={styles.linkageLabel}>
          <div class={styles.linkageLabelLeft} >
            <div class={props.label ? styles.peopleLabelRight : ''} >{props.label}</div>
          </div>

          <div class={styles.linkageLabelRight}>
            <div class={props.valueTop ? styles.linkageLabelTop : ''} >{props.valueTop}</div>
            <div class={props.valueBottom ? styles.linkageLabelBottom : ''} >{props.valueBottom}</div>
          </div>

        </div>
      return dom
    },
  })

  return {
    'components': component,
    'outHTML': vNodeTransformDom(component)
  }
}
